import './style.css'
import 'quill/dist/quill.snow.css'
import PocketBase from 'pocketbase'
import Quill from 'quill'
import { createApp, nextTick, reactive } from 'petite-vue'
import { formatDate } from './utils'
import { setPage, prevPage, nextPage } from './page-nav'
import { addPost, delPost, editPost, updatePost, fetchPosts } from './post'

const { log, dir, table, clear, warn, error } = console
const HOST = 'http://127.0.0.1:8090'  /* 后端接口主机 */
const API = `${HOST}/api`             /* 后端接口地址 */
const PB = new PocketBase(HOST)       /* 创建数据库连接 */
let quill = null                      /* 富文本编辑器实例（挂在vue里会一直报错，见`https://github.com/slab/quill/issues/4375`） */

createApp({
  isLogin: false,         /* 是否已经登录 */
  postTitle: '',          /* 正在编辑的帖子标题 */
  postContent: '',        /* 正在编辑的帖子内容（富文本） */
  posts: [],              /* 帖子列表 */
  perPage: 5,             /* 每页5篇 */
  currentPage: 1,         /* 当前第几页 */
  totalPages: 1,          /* 总共有多少页 */
  imageFiles: [],         /* 用户选择的文件列表 */
  isUploading: false,     /* 是否正在上传 */
  formatDate,             /* 格式化日期为当地时间 */
  get user() {
    const auth = localStorage.getItem('pocketbase_auth')
    if (!auth) return
    const data = JSON.parse(auth)
    return data.record /* 动态从缓存里取出user数据（只读） */
  },

  // 初始化
  async mounted() {
    await this.checkToken()   /* 检查token，如果token合法就不用登录 */
  },

  // 初始化Quill编辑器
  initQuill() {
    const options = {
      modules: {
        toolbar: [
          [{ 'size': ['small', false, 'large'] }],
          [{ 'color': [] }, { 'background': [] }],
          ['bold', 'italic', 'underline'],
          // [{ 'align': [] }],
          ['image'],
          // ['clean'],
        ],
      },
      placeholder: '写点什么...',
      theme: 'snow'
    }
    quill = new Quill(this.$refs.quill, options)
    quill.on('text-change', () => {
      this.postContent = quill.getSemanticHTML()
    })

    const toolbar = quill.getModule('toolbar')
    toolbar.addHandler('image', ()=>{
      // 支持单次选择并上传多张图片
      let input = document.createElement('input')
      input.setAttribute('type', 'file')
      input.setAttribute('accept', 'image/*')
      input.setAttribute('multiple', '') // 允许选择多张图片
      input.click()

      input.onchange = async () => {
        let files = Array.from(input.files)
        if (files.length === 0) return
        
        this.isUploading = true
        let imageUrls = []

        for (const file of files) {
          let mediaForm = new FormData()
          mediaForm.append("file", file)
          mediaForm.append("user", this.user.id)

          try {
            const media = await PB.collection("media").create(mediaForm)
            let imageUrl = `${API}/files/media/${media.id}/${media.file}` // 获取图片URL
            imageUrls.push(imageUrl)
          } catch (err) {
            console.error("图片上传失败", err)
            alert("上传失败，请重试")
            this.isUploading = false
            return
          }
        }
        this.isUploading = false

        // 插入所有上传成功的图片到 Quill
        let range = quill.getSelection()
        imageUrls.forEach(url => {
          quill.insertEmbed(range.index, 'image', url)
        })
        console.log('图片已上传并插入到编辑器:', imageUrls)


        return
        // 每次上传单张图片
        let file = input.files[0]
        if (!file) return

        let mediaForm = new FormData()
        mediaForm.append("file", file)
        mediaForm.append("user", this.user.id)

        try {
          this.isUploading = true
          const media = await PB.collection("media").create(mediaForm)
          this.isUploading = false
    
          let imageUrl = `${API}/files/media/${media.id}/${media.file}` // 获取图片URL
          let range = quill.getSelection()
          quill.insertEmbed(range.index, 'image', imageUrl) // 插入到 Quill 编辑器
          console.log('Image uploaded and inserted:', imageUrl)
        } catch (err) {
          console.error("图片上传失败", err)
          alert("上传失败，请重试")
        }
        this.isUploading = false

        插入base64图片
        if (file) {
          let reader = new FileReader()
          reader.onload = e => {
            let imageUrl = e.target.result // 或者上传到服务器后获取 URL
            
            let range = quill.getSelection()
            quill.insertEmbed(range.index, 'image', imageUrl)
            console.log('Image inserted:', imageUrl)
          }
          reader.readAsDataURL(file)
        }
      }
    })
  },

  // 检查token是否匹配
  async checkToken() {
    if (PB.authStore.isValid) { /* PB.authStore.isValid 用于不联网检查本地token是否过期，不能用 this.isLogin = PB.authStore.isValid，变成响应式可能会卡住 */
      try {
        await PB.collection('users').authRefresh() /* 联网验证token是否匹配 */
        console.log("自动登录成功:", PB.authStore)
        this.initData()
      } catch (err) {
        console.error("token不匹配", err)
        this.logout()
      }
    } else {
      console.log("token无效")
      this.logout()
    }
  },

  // 用户登录
  async login() {
    try {
      const account = this.$refs.acc.value
      const password = this.$refs.pwd.value
      // 验证密码，登录成功会自动创建一个名为 pocketbase_auth 的 localStorage
      const authData = await PB.collection('users').authWithPassword(account, password)
      console.log("登录成功", authData)
      this.initData()
    } catch (err) {
      console.error("登录失败", {err})
    }
  },

  // 登录后的初始化数据
  async initData() {
    this.isLogin = true
    await this.fetchPosts()   /* 获取帖子列表 */
    nextTick(()=>this.initQuill())
  },

  // 注销后的清除敏感数据
  resetData() {
    this.isLogin = false
    this.posts = []
  },

  // 用户注册
  async register() {
    const account = this.$refs.acc.value
    const password = this.$refs.pwd.value
    const data = {
      "password": password,
      "passwordConfirm": password,
      "email": account,
      "emailVisibility": true,
      "name": account.trim().split("@")[0]
    }
    try {
      const newUser = await PB.collection('users').create(data)
      console.log("注册成功", newUser)
      alert("注册成功，正在自动登录...")

      // 注册成功后自动登录
      await this.login()
    } catch (err) {
      console.error("注册失败", err)
      alert("注册失败，请稍后重试")
    }
  },

  // 登出
  logout() {
    PB.authStore.clear()
    this.resetData()
    console.log("已退出登录")
  },

  // 获取单个文件URL
  getSingleFile(record, fieldName) {
    return `${API}/files/${record.collectionName}/${record.id}/${record[fieldName]}`
  },

  // 获取多个文件URL
  getMultipleFiles(record) {
    /**
     * 注意这里是关联查询，根据 posts 表里的 files 字段(存放的是文件id)，
     * 查询 media 表里的匹配 文件id 对应的 file 字段（存放的是文件名），
     * 目前表名和字段名都是写死的
     */
    const files = record.expand['files'] || [] /* 关联数据需要先用 expand 展开 */
    const urls = files.map(media => `${API}/files/media/${media.id}/${media.file}`)
    return urls
  },

  // 发表帖子，这里调用的是外部 post 模块的方法（下同）
  addPost() {
    addPost.call(this, PB)
  },

  // 删除帖子
  delPost(post) {
    delPost.call(this, PB, post)
  },

  // 编辑帖子（弹出编辑框）
  editPost(post) {
    editPost.call(this, post)
  },

  // 更新帖子（写入数据库）
  updatePost(id, content) {
    updatePost.call(this, PB, id, content)
  },

  // 获取帖子列表
  fetchPosts() {
    fetchPosts.call(this, PB)
  },

  // 重置帖子表单
  resetPostForm() {
    this.postTitle = ''
    this.postContent = ''
    this.imageFiles = []
    this.$refs.fileInput.value = ''
    if (quill) {
      quill.setContents([])
      quill.setText('')
    }
  },

  // 选择图片时追加到文件列表
  async handleFileUpload(e) {
    this.imageFiles = Array.from(e.target.files)
    this.isUploading = true

    let mediaIds = []

    for (const file of this.imageFiles) {
      const mediaForm = new FormData()
      mediaForm.append("file", file)
      mediaForm.append("user", this.user.id)

      try {
        const media = await PB.collection("media").create(mediaForm)
        mediaIds.push(media.id)
        log('上传文件成功!', mediaIds)
      } catch (err) {
        console.error("图片上传失败", err)
        alert("上传失败，请重试")
        this.isUploading = false
        return
      }
    }

    this.imageFiles = mediaIds
    this.isUploading = false
  },

  // 跳转到页面
  setPage,

  // 上一页
  prevPage,

  // 下一页
  nextPage,

}).mount('#app')